<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API

//引入子组件
const emits=defineEmits(['itemClick'])//定义一个名为itemClick的事件，用于在子组件中触发父组件的事件。
//引入props
const props = defineProps({
  categoryList: {
    type: Array,
    default: () => [],
  },
})
//引入store

//请求数据初始化页面
const activeIndex = ref(0) // 当前选中项的下标
const handleItemClick = (index) => {
  activeIndex.value = index
  // 这里可以添加其他逻辑
emits('itemClick',index)
}
</script>

<template>
  <view class="nav-container">
    <view
      v-for="(item, index) in categoryList"
      :key="index"
      :class="['nav-item', { active: activeIndex === index }]"
      @tap="handleItemClick(index)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<style lang="scss">
.nav-container {
  display: flex;
  flex-direction: column;
}

.nav-item {
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  border-left: 4rpx solid transparent;

  &.active {
    color: #27ba9b;
    border-left-color: #27ba9b;
    background-color: #f6f6f6;
  }
}
</style>
